<script setup>
import { Decoration4, Decoration8 } from '@dataview/datav-vue3/es'
</script>

<template>
  <div class="header">
    <Decoration4 class="header-decoration-left" :color="['red']" :reverse="true" />
    <div class="header-title">
      <Decoration8 />
      <div class="header-title-text">
        Cesium大屏可视化系统
      </div>
      <Decoration8 :reverse="true" />
    </div>
    <Decoration4 class="header-decoration-right" :reverse="true" />
  </div>
</template>

<style lang="scss">
.header {
  display: flex;

  .header-decoration-left {
    flex: 0 1 25%;
    height: 50px;
  }

  .header-title {
    display: flex;
    flex: 0 1 50%;
    height: 50px;

    .header-title-text {
      flex: 1;
      color: skyblue;
      font-size: 24px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      vertical-align: middle;
    }

    .dv-decoration-8 {
      flex: 0.5;
      height: 50px;
    }
  }

  .header-decoration-right {
    flex: 0 1 25%;
    height: 50px;
    transform: rotateY(180deg);
  }
}
</style>
